<template>
	<view class="recommend" ref="container" v-if="hostProduct.length > 0">
		<view class="jingp-q">
			<view :class="avati == 1 ? 'active' : 'jingp-w'" @click="sceleTap(1)">精选</view>
			<view :class="avati == 2 ? 'active' : 'jingp-w'" @click="sceleTap(2)">新品</view>
		</view>
		<!-- <view class="title acea-row row-center-wrapper">
			<text class="iconfont icon-zhuangshixian"></text>
			<text class="name">为你推荐</text>
			<text class="iconfont icon-zhuangshixian lefticon"></text>
		</view> -->
		<view class="recommendList acea-row row-between-wrapper">
			<view @click="routerGo(item)" class="item" v-for="(item, recommendIndex) in hostProduct" :key="recommendIndex">
				<view class="pictrue"><image :src="item.image" class="image" /></view>
				<view class="name">{{ item.storeName }}</view>
				<view class="money font-color-red">
					<text class="num">{{ item.price }}豆</text>
					<text class="xiaos">已售{{item.sales}}件</text>
				</view>
			</view>
		</view>
		<Loading :loaded="loadend" :loading="loading"></Loading>
	</view>
</template>
<script>
// import {
// 	getHostProducts
// } from '@/api/store';
import Loading from '@/components/Loading';
import { getHomeData } from '@/api/public';
export default {
	name: 'Recommend',
	props: {
		recommendLoading: Boolean
	},
	components: {
		Loading
	},
	watch: {
		recommendLoading(nextLoading) {
			if (nextLoading) {
				this.hostProducts();
			}
		}
	},
	data: function() {
		return {
			hostProduct: [],
			page: 1,
			limit: 20,
			loadTitle: '',
			loading: false,
			loadend: false,
			avati: 1
		};
	},
	mounted: function() {
		this.hostProducts();
	},
	methods: {
		sceleTap(index) {
			this.avati = index;
			if(this.avati ==1){
				this.hostProducts();
			}else{
				this.hostProducts();
			}
		},
		routerGo(item) {
			this.$yrouter.push({
				path: '/pages/shop/GoodsCon/index',
				query: {
					id: item.id
				}
			});
		},
		hostProducts() {
			getHomeData().then(res => {
				let that = this;
				if (that.avati == 1) {
					that.hostProduct = res.data.bastList;
				} else {
					that.hostProduct = res.data.firstList;
				}
			});
		}

		// hostProducts: function () {
		// 	let that = this;
		// 	if (that.loading) return; //阻止下次请求（false可以进行请求）；
		// 	if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
		// 	that.loading = true;
		// 	getHostProducts(that.page, that.limit).then(res => {
		// 		console.log('1111111',res)
		// 		that.loading = false;
		// 		//apply();js将一个数组插入另一个数组;
		// 		that.hostProduct.push.apply(that.hostProduct, res.data);
		// 		that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
		// 		that.page = that.page + 1;
		// 		this.$emit('changeRecommendLoading', false)
		// 	});
		// }
	}
};
</script>
<style lang="less" scoped>
.jingp-q {
	display: flex;
	justify-content: space-between;
	width: 30%;
	margin: 24rpx auto;
	height: 72rpx;
	.jingp-w {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #333333;
		line-height: 72rpx;
	}
	.active {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #333333;
		line-height: 72rpx;
		border-bottom: 4rpx solid #f9690a;
	}
}
</style>
